<section class="header has-tabs clearfix p-0">
  <ul class="tab-nav">
    <li>
      <a href="#" {{action (action (mut context) ) "global"}} class="{{if (eq context "global") "active" ""}}">{{t "rolesPage.headers.global"}}</a>
    </li>
    <li>
      <a href="#" {{action (action (mut context) ) "cluster"}} class="{{if (eq context "cluster") "active" ""}}">{{t "rolesPage.headers.cluster"}}</a>
    </li>
    <li>
      <a href="#" {{action (action (mut context) ) "project"}} class="{{if (eq context "project") "active" ""}}">{{t "rolesPage.headers.project"}}</a>
    </li>
  </ul>
  <div class="right-buttons">
    {{#link-to
       "security.roles.new"
       (query-params context=context id=null)
       classNames="btn btn-sm bg-primary right-divider-btn"
       disabled=(rbac-prevents resource="globalrole" scope="global" permission="create")
    }}
      {{t "rolesPage.addRole" context=readableMode}}
    {{/link-to}}
    <span id="header-search"/>
  </div>
</section>

{{#if defaultGlobalRoleDoesNotExist}}
  <section>
    <BannerMessage
      @color="bg-warning"
      @message={{t "rolesPage.index.warning" appName=settings.appName}}
    />
  </section>
{{/if}}

<section class="instances">
  {{#sortable-table
       bulkActions=true
       classNames="grid sortable-table"
       sortBy=sortBy
       descending=descending
       headers=headers
       searchText=searchText
       showHeader=true
       body=filteredContent
       rightActions=true
       as |sortable kind row dt|
  }}
    {{#if (eq kind "row")}}
      <tr class="main-row">
        <td valign="middle" class="row-check" style="padding-top: 2px;">
          {{check-box nodeId=row.id}}
        </td>
        <td valign="middle">
          {{badge-state model=row}}
        </td>
        <td data-title="{{t "rolesPage.index.table.name"}}:" class="clip">
          {{#link-to "security.roles.detail" row.id (query-params type=context)}}
            {{row.name}}
          {{/link-to}}
        </td>
        <td data-title="{{t "rolesPage.index.table.id"}}:" class="clip">
            {{row.id}}
        </td>
        <td data-title="{{t "rolesPage.index.table.builtin"}}:" >
          {{#if row.builtin}}
            <i class="icon icon-check"/>
          {{else}}
            <span class="text-muted">&ndash;</span>
          {{/if}}
        </td>
        <td data-title="{{t "rolesPage.index.table.builtin"}}:" >
          {{#if (or row.clusterCreatorDefault row.projectCreatorDefault row.newUserDefault)}}
            <i class="icon icon-check"/>
          {{else}}
            <span class="text-muted">&ndash;</span>
          {{/if}}
        </td>
        <td data-title="{{t "generic.created"}}:" class="text-right pr-20">
          {{date-calendar row.created}}
        </td>
        <td data-title="{{t "generic.actions"}}:" class="actions">
          {{action-menu model=row}}
        </td>
      </tr>
    {{else if (eq kind "nomatch")}}
      <td colspan="5" class="text-center text-muted lacsso pt-20 pb-20">{{t "rolesPage.index.table.noMatch"}}</td>
    {{else if (eq kind "norows")}}
      <td colspan="5" class="text-center text-muted lacsso pt-20 pb-20">{{t "rolesPage.index.table.noData"}}</td>
    {{else if (eq kind "right-actions")}}
      <div class="checkbox">
        <label>
          {{input type="checkbox" checked=showOnlyDefaults}}
          {{t "rolesPage.index.table.showDefaults"}}
        </label>
      </div>
    {{/if}}
  {{/sortable-table}}
</section>
